<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">车站收藏列表</div>
            <div class="layui-card-body">
                <table id="favoritestationlist" lay-filter="favoritestationFilter"></table>
            </div>
        </div>
    </div>

    <script src="../res/layui/layui.js"></script>
    <script>
        layui.use(function () {
            //获取模块对象
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var util = layui.util;
            var form = layui.form;

            $.get('http://127.0.0.1:8080/user/listAll', function (resp) {
                let list = resp.data
                $.each(list, (i, a) => {
                    $('#uid').append(`<option value="${a.id}">${a.username}</option>`)
                })
                //
                form.render('select')
            })

            table.render({
                elem: '#favoritestationlist',                              //用于渲染数据的表格元素选择器
                url: 'http://127.0.0.1:8080/favorite/list',         //服务端数据接口
                page: {//分页配置
                    curr: 1,
                    limit: 10,
                    limits: [5, 10, 15, 20]

                },                                       //开启分页
                cols: [[
                    { type: 'checkbox' },
                    { title: '序号', type: 'numbers' },
                    { title: 'ID', field: 'id' },
                    { title: '名字', field: 'name' },
                    { title: '标签', field: 'tags' },
                    { title: '创建用户', templet: '<div>{{d.user.username}}</div>' },

                    { title: '热度值', field: 'hot' },
                    { title: '操作', templet: '#rowTools', width: 300 },

                ]]
            })

            table.on('tool(favoritestationFilter)', function (obj) {
                //获取被点击元素的lay-event值，通过该值确定哪个按钮被点击
                let e = obj.event
                switch (e) {
                    case 'del':
                        //删除
                        layer.confirm('确认删除该收藏夹吗?', { icon: 3 }, function () {
                            $.ajax({
                                url: `http://127.0.0.1:8080/favorite/del/${obj.data.id}`,
                                type: 'DELETE',
                                success: function (resp) {
                                    if (resp.code === 0) {
                                        layer.msg(resp.msg)
                                        //删除dom结构，并更新缓存
                                        obj.del()
                                    } else {
                                        layer.alert(resp.msg, { icon: 2 })
                                    }
                                }
                            })
                        })
                        break;
                    case 'updateName':
                        layer.open({
                            type: 1,
                            title: '修改',
                            content: $('#updateNameDialog'),
                            success: function () {
                                //数据回显
                                form.val('update-form', obj.data)
                            },
                            btn: ['确定', '取消'],
                            btnAlign: 'c',
                            btn1: function (index, layero) {
                                let data = form.val('update-form')
                                //获取表单数据,并封装为formData对象
                                let formData = new FormData($('#update-form')[0])
                                $.ajax({
                                    url: 'http://127.0.0.1:8080/favorite/update',
                                    type: 'PUT',
                                    processData: false,
                                    contentType: false,
                                    data: formData,
                                    success: function (resp) {
                                        if (resp.code === 0) {
                                            layer.msg(resp.msg)
                                            layer.closeAll()
                                            table.reloadData('favoritestationlist', {
                                                scrollPos: 'fixed'  // 保持滚动条位置不变 
                                            })
                                        } else {
                                            layer.alert(resp.msg, { icon: 2 })
                                        }
                                    }
                                })

                            }
                        });
                        break;
                    case 'details':
                        layer.open({
                            type: 1,
                            offset: 'r',
                            title: '收藏的车站',
                            anim: 'slideLeft', // 从右往左
                            area: ['320px', '100%'],
                            shade: 0.1,
                            shadeClose: true,
                            id: 'ID-demo-layer-direction-r',
                            content: '<div style="padding: 16px;" class="layui-btn-container"></div>',
                            success: function (layero, index, that) {
                                console.log(obj.data)
                                $.get(`http://127.0.0.1:8080/favoritedetails/details/${obj.data.id}`, function (resp) {
                                    console.log(resp.data)
                                    let list = resp.data
                                    let id = obj.data.id
                                    $.each(list, (i, e) => {
                                        //创建一个按钮对象
                                        let btn = $(`<button class="layui-btn layui-bg-blue layui-btn-fluid">${e.name}</button>`)
                                        //将按钮加入弹层中
                                        layero.find('#ID-demo-layer-direction-r>.layui-btn-container').append(btn)
                                        //为按钮绑定点击事件完成加入歌单请求
                                        btn.on('click', function () {
                                            //详情查看
                                            layer.open({
                                                type: 1,                                //弹层类型 1：页面层
                                                content: $('#stationInfoDialog'),         //弹层dom元素
                                                closeBtn: 2,                           //标题栏关闭图标样式  
                                                area: ['600px', '420px'],
                                                shadeClose: true,
                                                success: function (layero, index, that) {  //弹层被成功打开后回调  
                                                    layero.find('#id').text(e.id)
                                                    layero.find('#name').text(e.name)
                                                    layero.find('#grade').text(e.grade)
                                                    layero.find('#img').html(`<div><img src="${e.img}" height="100px"></div>`)
                                                },
                                                /*btn: ['关闭'],   //自定义按钮
                                                btnAlign: 'c',   //自定义按钮位置 l-左  c-中  r-右
                                                btn1: function () {    //自定按钮事件
                                                    layer.close(index)
                                                }*/
                                            })
                                            //获取收藏夹
                                            /*let listid = obj.data.id
                                            //获取车站id
                                            let sid = e.id
                                            console.log(sid)
                                            let data = {
                                                listd: listid,
                                                sid: sid
                                            }*/
                                            //发送ajax请求
                                            /*$.post('http://127.0.0.1:8080/favoritedetails/add', data, function (resp) {
                                                if (resp.code === 0) {
                                                    layer.msg(resp.msg, function () {
                                                        layer.closeAll()
                                                    })
                                                } else {
                                                    layer.alert(resp.msg, { icon: 0 })
                                                }
                                            })*/
                                        })
                                    })
                                })
                            }
                        });
                        break;
                }
            })

        })


    </script>
    <div id="updateNameDialog" style="display: none;padding:20px">
        <form class="layui-form layui-form-pane" lay-filter="update-form" id="update-form">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">名称:</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入新名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">收藏夹所属用户:</label>
                <div class="layui-input-block">
                    <select name="uid" id="uid">
                        <option value="0">不可空</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">标签:</label>
                <div class="layui-input-block">
                    <textarea name="tags" id="tags" class="layui-textarea" placeholder="请填写内容"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">热度值:</label>
                <div class="layui-input-block">
                    <input type="text" name="hot" required lay-verify="required" placeholder="请输入新名称" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" id="forDemo">提交</button>
                </div>
            </div> -->
        </form>
    </div>
    <div id="stationInfoDialog" style="display: none;padding:20px">
        <table class="layui-table" lay-size="sm">
            <tr>
                <td>ID</td>
                <td><span id="id"></span></td>
            </tr>
            <tr>
                <td>名称</td>
                <td><span id="name"></span></td>
            </tr>
            <tr>
                <td>等级</td>
                <td><span id="grade"></span></td>
            </tr>
            <tr>
                <td>图片</td>
                <td><span id="img"></span></td>
            </tr>
        </table>
    </div>
    <!--自定义头工具栏-->
    <script id="toolbar" type="text/html">
    <div class="layui-inline">
        <button class="layui-btn layui-btn-danger" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" class="layui-input" id="keyword" placeholder="请输入查询关键字">
        </div>
        <button class="layui-btn layui-btn-normal" lay-event="search">
            <i class="layui-icon layui-icon-search"></i>
            搜索
        </button>
    </div>
</script>
    <!--自定义行工具栏-->
    <script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <!-- <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addlist">
            <i class="layui-icon layui-icon-add-1"></i>
            加入歌单
        </button> -->
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-about"></i>
            查看
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateName">
            <i class="layui-icon layui-icon-edit"></i>
            修改
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

    <!--试听按钮的页面模板-->
    <script id="preview" type="text/html">
    <button class="layui-btn layui-btn-normal layui-btn-xs preview-btn" lay-event="playOrPause" data-playing="0"
            data-src="{{d.path}}">
        <i class="layui-icon layui-icon-play"></i>
    </button>
</script>


    <!--歌曲详情弹层-->
    <div id="music-details-dialog" style="display: none;padding: 20px">
        <table class="layui-table" lay-even>
            <tr>
                <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
                <td>歌曲名:</td>
                <td id="musicName">xxx</td>
                <td>专辑:</td>
                <td id="ablumName">xxxx</td>
                <td>歌手：</td>
                <td id="singerName">xxxx</td>
            </tr>
            <tr>
                <td class="layui-elip">发行公司：</td>
                <td id="company" class="layui-elip">xxxx</td>
                <td class="layui-elip">发行时间</td>
                <td id="releaseTime" class="layui-elip">xxxx</td>
                <td>歌曲风格</td>
                <td id="style">xxxx</td>
            </tr>
            <tr>
                <td>文件大小</td>
                <td id="size">xxx</td>
                <td>试听</td>
                <td colspan="3">
                    <audio src="" class="shiting" controls></audio>
                </td>
            </tr>
            <tr>
                <td colspan="7" id="lrc">歌词</td>
            </tr>
        </table>
    </div>

    <!--歌曲编辑弹层-->
    <div id="music-edit-dialog" style="display: none;padding: 20px">
        <form class="layui-form" id="musicInfo" lay-filter="music-info">
            <input type="hidden" name="id">
            <table class="layui-table" lay-even>
                <tr>
                    <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
                    <td>歌曲名:</td>
                    <td><input type="text" name="name" class="layui-input"></td>
                    <td>专辑:</td>
                    <td>
                        <select name="aid" id="aid" lay-filter="select-filter">
                            <option value="0">匿名</option>
                        </select>
                    </td>
                    <td>歌手：</td>
                    <td><input type="text" name="sname" class="layui-input"></td>
                </tr>
                <tr>
                    <td>发行公司：</td>
                    <td><input type="text" class="layui-input" name="company" readonly></td>
                    <td>发行时间</td>
                    <td><input type="text" class="layui-input" name="releasedate" readonly></td>
                    <td>歌曲风格</td>
                    <td>
                        <select name="style">
                            <option value="流行">流行</option>
                            <option value="摇滚">摇滚</option>
                            <option value="民谣">民谣</option>
                            <option value="电子">电子</option>
                            <option value="轻音乐">轻音乐</option>
                            <option value="爵士">爵士</option>
                            <option value="R&B">R&B</option>
                            <option value="乡村">乡村</option>
                            <option value="中国风">中国风</option>
                            <option value="说唱">说唱</option>
                            <option value="古典">古典</option>
                            <option value="世界音乐">世界音乐</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>文件大小</td>
                    <td><input type="text" class="layui-input" name="size" readonly></td>
                    <td>持续时长</td>
                    <td><input type="text" class="layui-input" name="duration" readonly></td>
                    <td>试听</td>
                    <td>
                        <audio src="" class="shiting" controls></audio>
                    </td>
                </tr>
                <tr>
                    <td colspan="7">
                        <textarea class="layui-textarea" name="lrc"></textarea>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>

</html>